<script>
export default {
  name: "tao-tab",
  data() {
    return {
      isEdit: false
    }
  },
  props: {
    value: String
  },
  methods: {
    onDbClick() {
      this.isEdit = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    onBlur() {
      this.isEdit = false
    },
    onKeyup(event) {
      this.$emit("input", event.target.value)
      this.isEdit = false
    }
  }
}
</script>

<template>
  <div>
    <input type="text" class="layui-input" ref="input" v-if="isEdit" @blur="onBlur" :value="value" @keyup.enter="onKeyup">
    <span v-else @dblclick="onDbClick">{{ value }}</span>
  </div>
</template>

<style scoped lang="less">
div {
  width: 80px;

  span {
    width: 80px;
    height: 38px;
    display: flex;
    align-items: center;
    padding-left: 11px;
    cursor: pointer;
  }

  .layui-input {
    width: 80px;
  }
}
</style>